<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色列表</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>角色管理</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-row :gutter="24">
		  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
		  			<span><h4>角色列表</h4></span>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
		  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" style="margin-left:-90px;">
		  			<div style="margin-left:1600px">
		  				<el-button type="primary" @click="addRole">新增</el-button>
		  			</div>
		  		</el-col>
		  	</el-row>
		  </el-card>
		  
		  <el-card calss="box-card" style="margin-top:20px">
			  <el-row style="overflow-x:hidden;">
				  <el-table :data="tableData" style="width:100%;margin:15px auto">
				    <el-table-column label="角色编号" width="500" prop="roleCode">
				    </el-table-column>
				    <el-table-column label="角色名称" width="500" prop="roleName">
				    </el-table-column>
				    <el-table-column label="权限列表" width="500" prop="menus">
				    	<template slot-scope="scope">
					    	<el-popover trigger="hover" placement="top">
					    		<p>{{ scope.row.menus }}</p>
					    		<div slot="reference" class="name-wrapper">
							    	<el-tag size="medium">{{ scope.row.menus }}</el-tag>
						    	</div>
					    	</el-popover>
				    	</template>
				    </el-table-column>
				    <el-table-column label="操作">
				      <template slot-scope="scope">
				        <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				      </template>
				    </el-table-column>
				  </el-table>
			  </el-row>
		  </el-card>
	  </el-main>
  </el-container>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	tableData: []
	    },
	    mounted: function (){
	    	this.getUserInfo()
	    },
	    methods: {
	      //获取用户列表
	      findRoleList(){
	    	  var _this = this;
	    	  $.get("./role/finaAllRole", function(data) {
	    		  data.forEach(function (_data, _index, _array){
		    		  var menuList = _data.menuList;
		    		  var _menus = "";
		    		  menuList.forEach(function (value, index, array){
		    			  _menus = _menus+ value.menuName+","
		    		  });
		    		  _menus = _menus.substring(0,_menus.length-1);
		    		  _data['menus'] = _menus;
	    		  })
	    		  _this.tableData = data;
	    	  });
	      },
	      getUserInfo(){
	    	  var _this = this;
	    	  $.post("./sys/userinfo", function(data) {
	    		  	if(data!=null){
	    		  		_this.findRoleList();
	    		  	}
	    	  });
	      },
	      handleEdit(index, row) {
	        var id = row.id;
	        window.location.href = "editRole.html?id="+id;
	      },
	      addRole(){
	    	  window.location.href = "addRole.html?id=0";
	      }
	    }
	  });
</script>
</html>